<template>
	<div class="companyDetail">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item>首页</el-breadcrumb-item>
			<el-breadcrumb-item>代理公司管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/company/rentalCompany' }">代理公司</el-breadcrumb-item>
			<el-breadcrumb-item>代理公司详情</el-breadcrumb-item>
		</el-breadcrumb>
		<el-row class='companyDetailTitle'>{{companyName}}关联线路</el-row>
		<el-row type="flex" class="row-bg" justify="space-around">
			<el-col :span="8">
				<div class="grid-content bg-purple">
					<el-row class='text-center'>未关联线路</el-row>
					<el-checkbox-group v-model="noRelatedChecked">
						<el-checkbox v-for="item in noRelatedList" :label="item.id" :key='item.id'>{{item.srcCity}}--{{item.dstCity}}</el-checkbox>
					</el-checkbox-group>
				</div>
			</el-col>
			<el-col :span="3">
				<div class="grid-content btn-content bg-purple">
					<div>
						<el-button class='add-btn' type="primary" icon="plus" @click="add">添加关联线路</el-button>
						<el-button class='del-btn' type="primary" icon="delete" @click="del">删除关联线路</el-button>
					</div>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="grid-content bg-purple-light">
					<el-row class='text-center'>已关联线路</el-row>
					<el-checkbox-group v-model="relatedChecked">
						<el-checkbox v-for="item in relatedList" :label="item.id" :key='item.id'>{{item.srcCity}}--{{item.dstCity}}</el-checkbox>
					</el-checkbox-group>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		name: "companyDetail",
		data() {
			return {
				companyId: '',
				companyName: '',
				noRelatedChecked: [],
				relatedChecked: [],
				noRelatedList: [],
				relatedList: [],
			}
		},
		methods: {
			serch() {
				var that = this;
				this.$http.get('/rentalcompanyRelateList.shtml', {
						params: {
							companyId: this.companyId
						}
					})
					.then(function(data) {
						if(data.code == 200) {
							that.noRelatedList = data.appendix;
							that.relatedList = data.data;
						}
					});
			},
			add() {
				var that = this;
				var data = {
					companyId: this.companyId,
					noRelatedChecked: this.noRelatedChecked
				};
				this.$http.post("/addRentalcompany.shtml",
					"param=" + JSON.stringify(data)
				).then(function(data) {
					if(data.code == 200) {
						that.serch();
						that.noRelatedChecked = [];
						that.$notify({
							title: '成功',
							message: '添加成功',
							type: 'success'
						});
					}
				})
			},
			del() {
				var that = this;
				this.$http.post("/delRentalcompany.shtml",
					"param=" + JSON.stringify(this.relatedChecked)
				).then(function(data) {
					if(data.code == 200) {
						that.serch();
						that.relatedChecked = [];
						that.$notify({
							title: '成功',
							message: '删除成功',
							type: 'success'
						});
					}
				})
			}
		},
		created() {
			var that = this;
			var href = window.location.href.split('?')[1].split('&')
			this.companyId = href[0].split('=')[1];
			this.companyName = decodeURI(href[1].split('=')[1]);
			this.serch();
		}
	}
</script>
<style>
	.companyDetail .companyDetailTitle {
		text-align: center;
	}
	
	.companyDetail .el-col-8 {
		width: 500px;
	}
	
	.companyDetail .el-col-3 {
		width: 200px;
	}
	
	.companyDetail .el-checkbox {
		width: 100%;
		margin: 20px 0;
		padding-left: 50px;
		box-sizing: border-box;
	}
	
	.companyDetail .el-checkbox+.el-checkbox {
		margin: 20px 0;
		padding-left: 50px;
		box-sizing: border-box;
	}
	
	.companyDetail .el-checkbox-group {
		height: 470px;
		overflow-y: auto;
	}
	
	.companyDetail .text-center {
		text-align: center;
		padding-top: 20px;
	}
	
	.companyDetail .grid-content {
		height: 508px;
		margin-top: 20px;
		border: 1px solid #d3dce6;
		background-color: #f9fafc;
	}
	
	.companyDetail .btn-content {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		/*border: none;
    background: transparent;*/
	}
	
	.companyDetail .btn-content> div {
		margin: 0 auto;
	}
	
	.companyDetail .el-button+.el-button {
		margin-left: 0;
	}
	
	.companyDetail .add-btn {
		display: block;
	}
	
	.companyDetail .del-btn {
		display: block;
		margin-top: 20px;
	}
	
	
</style>